<template>
  <div style="height: 800px; overflow: scroll;">
  <el-timeline>
    <el-timeline-item  
    v-for="(item, index) in state.articles"
    :key="index"
     :timestamp="item.date" placement="top">
      <el-card>
        <h4>{{ item.title }}</h4>
        <p>{{ item.source }}</p>
      </el-card>
    </el-timeline-item>
  </el-timeline>
  </div>
</template>

<script setup>
import { getTagArticleData } from '../service/article';
import { reactive , watch } from 'vue';

import { weekStockSearch } from '../stores/week'
import { storeToRefs } from 'pinia';

    const stockSearchStore = weekStockSearch()
    let { input } = storeToRefs(stockSearchStore)

    const state = reactive({
      articles:[],
    })

    getTagArticleData(input.value).then(res => {
      state.articles = res.data
    })

    // 只监听pinia中某一个值的变化
    watch(() => input.value, (newValue, oldValue) => {
      reloadData()
    })

    const reloadData = () => {
        getTagArticleData(input.value).then(res => {
            state.articles = res.data
        })
    }
</script>